<template>
  <page-header-wrapper>
      <a-card :bordered="false">
        <div class="table-page-search-wrapper">
          <a-row type="flex" justify="space-between" style="margin: 0 0 10px 0 ">
            <a-col >
              <a-button type="primary" style="margin-right: 30px" @click="showModal">新增</a-button>
              <a-button type="danger">删除</a-button>
            </a-col>
            <a-col>
              <a-row type="flex">
                <a-select show-search placeholder="全部角色" option-filter-prop="children"
                    style="width: 150px;margin-right: 10px"
                    :filter-option="filterOption"
                    @focus="handleFocus"
                    @blur="handleBlur"
                    @change="handleChange">
                    <a-select-option value="全部角色">全部角色</a-select-option>
                    <a-select-option value="超级管理员">超级管理员</a-select-option>
                    <a-select-option value="运营人员">运营人员</a-select-option>
                    <a-select-option value="管理员2">管理员2</a-select-option>
                </a-select>
                <a-col style="margin-right: 10px">
                  <a-input v-model="value" placeholder="请输入关键字"></a-input>
                </a-col>
                <a-col>
                  <a-config-provider :auto-insert-space-in-button="false">
                    <a-button type="primary" @click="toSearch">搜索</a-button>
                  </a-config-provider>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </div>
        <a-table :row-selection="rowSelection" :columns="columns" :data-source="info" bordered :pagination="false">
            <div slot="status" slot-scope="item" href="javascript:;">
              <div v-if="item" class="nomal"><span>正常</span></div>
            </div>
            <a slot="editEvent" slot-scope="item" href="javascript:;">
              <a-button type="primary" size="small" style="margin-right: 10px" @click="edit(item)">修改</a-button>
              <a-button type="danger" size="small" @click="delEvent(item)">删除</a-button>
            </a>
        </a-table>
        <a-row class="mt-40">
            <a-col :span="12" :offset="6" style="display: flex">
              <a-pagination size="large" :total="100" show-size-changer show-quick-jumper @change="pageChange"/>
              <a-button type="primary">确定</a-button>
            </a-col>
        </a-row>
      </a-card>
  </page-header-wrapper>
</template>

<script>
  export default {
    data() {
      return {
        visible: false,
        value:'',
        value2:'',
        activeName:'',
        columns: [
          {
            title: 'ID',
            dataIndex: 'ID',
            align: 'center'
          }, {
            title: '角色',
            dataIndex: '角色',
            align: 'center'
          }, {
            title: '权限',
            dataIndex: '权限',
            align: 'center'
          },{
            title: '描述',
            dataIndex: '描述',
            align: 'center'
          },{
            title: '状态',
            dataIndex: 'status',
            scopedSlots: { customRender: 'status' },
            align: 'center',
          },{
            title: '操作',
            dataIndex: 'editEvent',
            align: 'center',
            scopedSlots: { customRender: 'editEvent' },
          }
        ],
        info:[{
            key: '1',
            ID: '1',
            角色: '超级管理员',
            权限:'管理所有的管理员',
            描述: '拥有至高无上的权利',
            status: '正常',
            editEvent: '编辑'
          },{
            key: '2',
            ID: '2',
            角色: '管理员',
            权限:'所有列表的管理',
            描述: '事情很多，权力很大',
            status: '正常',
            editEvent: '编辑'
          },{
            key: '3',
            ID: '3',
            角色: '运营员',
            权限:'统计数据',
            描述: '暂无',
            status: '正常',
            editEvent: '编辑'
          },{
            key: '4',
            ID: '4',
            角色: '测试',
            权限:'调试',
            描述: '暂无',
            status: '正常',
            editEvent: '编辑'
          }
        ],
      }
    },
    methods:{
      edit(item){

      },
      delEvent(item){

      },
      pageChange(pageNumber) {
        console.log('Page: ', pageNumber);
      },
      toSearch(){
        console.log(22333,this.value)
      },
      handleChange(value) {
      console.log(`selected ${value}`)
    },
      handleBlur() {
        console.log('blur')
    },
      handleFocus() {
        console.log('focus')
    },
      filterOption(input, option) {
        // return (option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0)
    },
      showModal() {
        // this.visible = true;
    }
    },
    computed: {
      rowSelection() {
        return {
          onChange: (selectedRowKeys, selectedRows) => {
            // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
          }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .space{
    margin: 40px 0;
  }
  .nomal{
    width:50px;
    height: 30px;
    color: #33338F;
    background-color: #33CCFF;
    line-height: 30px;
    margin-left: 35%;
    border-radius: 50%;
    transform: scale(1,0.9);
  }
</style>
